<script setup lang="ts">
import { watch, ref, onUnmounted, inject, reactive } from "vue";
import AlertTable from "./alertTable.vue";
const isShow = defineModel("isShow");
const groupNameArr = inject("groupNameArr", ref({}));

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};
const emits = defineEmits(["toEqp"]);
const props = defineProps({
  alarmInfo: {
    type: Object,
    default: () => ({})
  },
  routerKey: {
    type: String,
    default: null
  },
  groupName: {
    type: String,
    default: null
  }
});

// watch(
//   () => isShow.value,
//   async newVal => {
//     if (newVal) {
//       console.log(props);
//     } else {
//       dialogClosed();
//     }
//   }
// );

function dialogClosed() {
  isShow.value = false;
}
function toEqp() {
  emits("toEqp");
}
</script>
<template>
  <px-dialog
    v-model="isShow"
    title="报警详情"
    :width="!props.groupName ? '400px' : '450px'"
    destroy-on-close
    align-center
    :append-to-body="true"
    @closed="dialogClosed"
  >
    <div v-if="!props.groupName" class="alarm-list">
      <ul class="alarm-ul">
        <li>
          <p>
            <span>报警级别：</span>
            <span>
              <px-tag style="color: #fff" round :color="tagBgColorList[alarmInfo.alarmLevel]"> {{ alarmInfo.alarmLevel }} </px-tag>
            </span>
          </p>
        </li>
        <li>
          <p>
            <span>报警点位：</span><span>{{ alarmInfo.point }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警位置：</span><span>{{ alarmInfo.twinName }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警内容：</span><span>{{ alarmInfo.alarmContent }}</span>
          </p>
        </li>
        <li>
          <p>
            <span>报警时间：</span><span>{{ alarmInfo.alarmTime }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div v-else class="flex justify-center">
      <AlertTable :isDialog="true" :twinIds="groupNameArr[props.groupName]" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <px-button v-if="props.routerKey" type="primary" @click="toEqp">设备详情</px-button>

        <px-button @click="dialogClosed">关闭</px-button>
      </div>
    </template>
  </px-dialog>
</template>
<style lang="scss" scoped>
:deep(.px-dialog) {
  .px-dialog__footer {
    padding-top: 0;
    text-align: center;
  }
}

.dialog-footer {
  padding: 0;
  text-align: center;
}

.alarm-list {
  line-height: 2;

  .alarm-ul {
    li {
      word-break: break-all;

      span:first-child {
        font-weight: 600;
        color: #333;
      }

      span:nth-child(2) {
        color: #666;
      }
    }
  }

  .grid-button-list {
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
    gap: 10px;
    padding: 5px 10px 15px 0;

    .grid-button-item {
      width: 120px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      border: 1px solid #666;
      border-radius: 12px;
    }
  }

  .detail-button {
    position: absolute;
    right: 16px;
    bottom: 10px;
  }
}
</style>
